import filter from 'lodash/filter'
import React, {Component, PropTypes} from 'react'
import {connect} from 'react-redux'
import {withRouter} from 'react-router'
///import { IonContent, IonList, IonItem, IonIcon } from 'reactionic';
import PullToRefresh from './assets/PullToRefresh'
import {callAPI} from 'restack'
import mobiscroll from "mobiscroll"

//TODO 离线数据分页
class ListView extends Component {
  static propTypes = {
    onFilter: PropTypes.func,
    path: PropTypes.string,
    configPath: PropTypes.string,
    totalPagesKey: PropTypes.string,
    transform: PropTypes.bool,
    startPage: PropTypes.number,
    paging: PropTypes.bool,
    offline: PropTypes.bool,
    // dataSource : PropTypes.oneOf(
    //   [PropTypes.array, PropTypes.func]
    // )
  }

  static defaultProps = {
		data: null,
    path: "payload", //数据路径 data path in response etc. payload for response.payload
    configPath: "", //分页配置路径 config path in response, etc. totalPages
    totalPagesKey: "totalPages", //总页数在config里的key total pages key in config
    transform: true, //是否使用iscroll whether enable iscroll
    startPage: 0,
    pageSize: 10,
    paging: true,
    offline: false,
    onFilter: null, //传入该值就启用离线搜索功能,若要使用服务器搜索,请勿传入该值 this is for offline search,
                    // dont set anything when u want to get searched data on server
    search: '',
	}

	constructor(props) {
		super(props);

		this.state = {
      totalPages: this.props.totalPages || 0,
      cacheData: null,
      data: !this.props.offline ? [] : this.props.data,
      page: 0,
      pageSize: this.props.pageSize,
      isRefresh: false,
    }
    this.handleRefresh = this.handleRefresh.bind(this)
    this.isShowNextPage = this.isShowNextPage.bind(this)
	}

  componentWillReceiveProps(nextProps){
    // if(newProps.search && this.props.search != newProps.search){
    //   this.requestOrDraw();
    // }
   if(this.state.refresh){
     console.log('refresh==============')
      this.refs.ptr.refreshScroll();
   }
  }

  componentDidUpdate(preProps, preState){
    if(this.props.onFilter != preProps.onFilter){ //更新搜索内容,则重绘 update search content
      this.requestOrDraw();
    }
  }

  componentDidMount(){
    this.requestOrDraw()
  }

  /**
   * 判断是server side render,还是data render, 刷新list
   */
  requestOrDraw(){
    var callback;
    if(this.refs.ptr) callback = this.refs.ptr.refreshScroll;

    if(!this.props.offline){ //server side render
      this.request(callback);
    }else{
      this.drawList(this.props.data, callback);
    }
  }

  filter(data){
    if(this.props.onFilter){
      return filter(data,function(item){
        return this.props.onFilter(item);
      }.bind(this))
    }else{
      return data;
    }
  }

  /**
   * 拼接url
   * @return {string} [url]
   */
  getUrl(){
    const pagination = `page=${this.state.page}&size=${this.state.pageSize}`;
    const search = `search=${this.props.search}`;
    console.log(`${this.props.requestOptions.url}?${pagination}&${search}`);
    return `${this.props.requestOptions.url}?${pagination}&${search}`;
  }

  /**
   * draw items in the list
   * @param  {array}   data
   * @param  {Function} callback 修改成功后的回调函数
   */
  drawList(data,callback){
    //load data from server(including search)
    if(!this.props.offline){
      console.log("[RIONIC-LISTVIEW] draw all data")
      this.setState({data: data, cacheData: null,refresh:true},function(){ //if there is something to do, then do it
        this.refs.ptr.refreshScroll();
        console.log('=================refresh')
        if (callback && typeof callback === 'function') {
          callback();
        }
      }.bind(this));
    }else{  //need offline search
      console.log("[RIONIC-LISTVIEW] draw filter data")
      this.setState({cacheData: this.filter(data), data: data},function(){
        if (callback && typeof callback === 'function') {
          callback();
        }
      });
    }
  }

  handleRefresh(downOrUp,callback){
    console.log("handleRefresh")
    var page, isRefresh;
    if(downOrUp == "up"){ //next page
      page = this.state.page + 1;
    }else{  // refresh
      page = this.props.startPage;
      isRefresh = true;
    }

    this.setState({page: page, isRefresh},function(){
      // 服务端渲染: 请求数据   server side render request data from server
      if(!this.props.offline) this.request(callback, isRefresh);
      else{ // 离线模式: 从handlePullAction取得新的(全部要显示的)数据 .
            // here will display all data received from handlePullAction
        const data = this.props.handlePullAction(downOrUp,this.state.data);
        this.drawList(data, callback);
      }
    });
  }

  /**
   * Server side render 请求数据,并绘制
   * @param  {Function} callback [refresh scroll if success]
   * @return {[type]}            [description]
   */
  request(callback){
    callAPI(this.getUrl(),this.props.requestOptions)
    .then(function(response){
      //设置totalPages
      var responseConfig = _.get(response, this.props.configPath, response);
      //使用totalPagesKey 从config取出总页数
			if (responseConfig&&responseConfig[this.props.totalPagesKey] != this.state.totalPages) {
				this.setState({totalPages: responseConfig[this.props.totalPagesKey]});
			}

      var data = _.get(response, this.props.path, response);
      if(!this.state.isRefresh){//加载下一页, load next page
        data = [...this.state.data, ...data];
      }

      this.drawList(data, callback);
    }.bind(this))
    .catch((error) => {

    })
  }

  /**
   * 判断是否显示下一页按钮/拖动提示
   * 使用分页 & 数据总长度 > 一页长度 && !最后一页
   * @param  {[type]}  data [description]
   * @return {Boolean}      [description]
   */
  isShowNextPage(data){
    
    return this.props.paging && data.length >= this.state.pageSize && this.state.page < (this.props.startPage == 0? this.state.totalPages -1 :this.state.totalPages)
  }

  onclick(){
    console.log('sdfsdfsa')
    this.refs.ptr.refreshScroll();
  }
  

	render() {
    const items = this.state.cacheData || this.state.data;
    const renderRow = (item,index)=>{
      return this.props.renderRow(item,index);
    };
    const isShowNextPage = this.isShowNextPage(items);
		return (
      <div className='asdf' style={{'overflowY':'hidden'}}>
      <button onClick={this.onclick.bind(this)} style={{position: "fixed",top:'10px',left:'10px',zIndex:9999,background:"#ccc"}}>buttona</button>
       {this.props.transform &&
          <PullToRefresh
            ref="ptr"
            className={this.props.ptrClass}
            handleRefresh={this.handleRefresh}
            pullUp={isShowNextPage}
            >
            <mobiscroll.Listview 
                    itemType={ListItem} 
                    data={items}
                    theme="mobiscroll"
                    swipe={false}
                    sortable={{
                      handle: 'right'
                    }}
                    enhance={true}
                />
          </PullToRefresh>
        }
      </div>
		);
	}
}

export default ListView

var ListItem = React.createClass({
      render: function() {
        return (
          <li >
            <div className="mbsc-ic mbsc-ic-home"> 
            {this.props.item.name}
            </div>
          </li>
        )
      } 
    });